<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>归一化工具集</title>
    <!-- 引入 Element UI 的样式文件 -->
    <link rel="stylesheet" href="https://thanhugo.oss-cn-shenzhen.aliyuncs.com/static/index.css">
    <!-- 引入 Vue.js -->
    <script src="https://thanhugo.oss-cn-shenzhen.aliyuncs.com/static/vue.min.js"></script>
    <!-- 引入 Element UI 的js文件 -->
    <script src="https://thanhugo.oss-cn-shenzhen.aliyuncs.com/static/index.js"></script>
    <script src="https://thanhugo.oss-cn-shenzhen.aliyuncs.com/static/js-yaml.min.js"></script>

    <!-- 自定义样式 -->
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }

        #app {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .el-tabs {
            background-color: #ffffff;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .el-tabs__header {
            margin: 0;
        }

        .el-tabs__nav-wrap {
            padding: 0 20px;
        }

        .tab-content {
            flex: 1;
            padding: 20px;
            margin: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            background-color: #ffffff;
        }

        .tab-1 {
            background-color: #f0f8ff;
        }

        /* 浅蓝色 */
        .tab-2 {
            background-color: #f0fff0;
        }

        /* 浅绿色 */
        .tab-3 {
            background-color: #fff0f5;
        }

        /* 浅粉色 */
        .tab-4 {
            background-color: #f5f5dc;
        }

        /* 浅米色 */
        .tab-YAML2JSON {
            background-color: #f0f8ff;
        }

        /* 浅蓝色，用于新选项卡 */
        .tab-YAML2DIRECTORY {
            background-color: #f0fff0;
        }

        /* 浅绿色，用于新选项卡 */
        .el-tabs__item {
            font-size: 16px;
            font-weight: bold;
        }

        .el-tabs__content {
            padding: 0;
        }

        .button-group,.json-actions {
            margin-top: 10px; /* 增加上间距 */
            margin-bottom: 10px; /* 增加下间距 */
        }
    </style>
</head>
<body>

<!-- 主面板 -->
<div id="app">
    <!-- 选项卡 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="YAML转JSON" name="YAML2JSON"></el-tab-pane>
        <el-tab-pane label="YAML转目录" name="YAML2DIRECTORY"></el-tab-pane>
        <el-tab-pane label="旅游卡1" name="1"></el-tab-pane>
        <el-tab-pane label="旅游卡2" name="2"></el-tab-pane>
        <el-tab-pane label="旅游卡3" name="3"></el-tab-pane>
        <el-tab-pane label="旅游卡4" name="4"></el-tab-pane>
    </el-tabs>

    <!-- 内容区域 -->
    <div :class="['tab-content', 'tab-' + activeTab]">
        <div v-if="activeTab === tabsMap.YAML2JSON">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card shadow="hover">
                        <template #header>
                            <span>YAML 输入</span>
                        </template>
                        <el-input
                                type="textarea"
                                :rows="20"
                                placeholder="请输入YAML格式内容"
                                v-model="yamlText"
                                class="yaml-input">
                        </el-input>
                        <div class="button-group">
                            <el-button type="primary" @click="parseYaml">解析</el-button>
                            <el-button type="danger" @click="clearYaml">清空</el-button>
                            <el-button type="success" @click="formatYaml">格式化</el-button>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" class="json-container">
                        <template #header>
                            <span>JSON 输出</span>
                        </template>
                        <el-input
                                type="textarea"
                                :rows="20"
                                placeholder="生成的JSON内容"
                                v-model="jsonText"
                                readonly
                                class="json-output">
                        </el-input>
                        <div class="json-actions">
                            <el-button type="info" @click="formatJson">格式化</el-button>
                            <el-button type="warning" @click="compressJson">压缩</el-button>
                            <el-button type="success" @click="copyJson">复制JSON</el-button>
                            <el-button type="success" @click="clearResult('json')">清空结果</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div v-if="activeTab === tabsMap.YAML2DIRECTORY">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card shadow="hover">
                        <template #header>
                            <span>YAML 输入</span>
                        </template>
                        <el-input
                                type="textarea"
                                :rows="20"
                                placeholder="请输入YAML格式内容"
                                v-model="yamlText"
                                class="yaml-input">
                        </el-input>
                        <div class="button-group">
                            <el-button type="primary" @click="parseYamlToDirectory">解析</el-button>
                            <el-button type="danger" @click="clearYaml">清空</el-button>
                            <el-button type="success" @click="formatYaml">格式化</el-button>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" class="json-container">
                        <template #header>
                            <span>目录路径输出</span>
                        </template>
                        <el-input
                                type="textarea"
                                :rows="20"
                                placeholder="生成的目录路径"
                                v-model="directoryText"
                                readonly
                                class="json-output">
                        </el-input>
                        <div class="json-actions">
                            <el-button type="success" @click="copyDirectory">复制目录路径</el-button>
                            <el-button type="success" @click="clearResult('dir')">清空结果</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div v-if="activeTab === '1'">
            <h2>旅游卡1 内容</h2>
            <p>这里是旅游卡1的相关内容。</p>
        </div>
        <div v-if="activeTab === '2'">
            <h2>旅游卡2 内容</h2>
            <p>这里是旅游卡2的相关内容。</p>
        </div>
        <div v-if="activeTab === '3'">
            <h2>旅游卡3 内容</h2>
            <p>这里是旅游卡3的相关内容。</p>
        </div>
        <div v-if="activeTab === '4'">
            <h2>旅游卡4 内容</h2>
            <p>这里是旅游卡4的相关内容。</p>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeTab: 'YAML2JSON', // 默认激活第一个选项卡
                yamlText: '', // YAML输入内容
                jsonText: '', // JSON输出内容
                directoryText: '', // 目录路径输出内容
                tabsMap: {
                    YAML2JSON: 'YAML2JSON',
                    YAML2DIRECTORY: 'YAML2DIRECTORY'
                },
            };
        },
        methods: {
            handleTabClick(tab) {
                console.log('切换到选项卡:', tab.name);
            },
            parseYaml() {
                try {
                    const documents = jsyaml.loadAll(this.yamlText);
                    if (documents.length === 0) {
                        this.$message.error("YAML内容为空");
                        console.log("YAML内容为空")
                    } else {
                        this.jsonText = JSON.stringify(documents, null, 2);
                    }
                } catch (e) {
                    this.$message.error(`YAML解析失败：${e.message}`);
                    console.log(`YAML解析失败：${e.message}`)
                    this.jsonText = '';
                }
            },
            parseYamlToDirectory() {
                try {
                    const documents = jsyaml.loadAll(this.yamlText);
                    if (documents.length === 0) {
                        this.$message.error("YAML内容为空");
                        console.log("YAML内容为空")
                    } else {
                        const paths = this.generateDirectoryPaths(documents[0]);
                        this.directoryText = `(\n  "${paths.join('",\n  "')}"\n)`;
                    }
                } catch (e) {
                    this.$message.error(`YAML解析失败：${e.message}`);
                    console.log(`YAML解析失败：${e.message}`)
                    this.directoryText = '';
                }
            },
            generateDirectoryPaths(obj, prefix = '') {
                let paths = [];
                for (const key in obj) {
                    if (Array.isArray(obj[key])) {
                        obj[key].forEach(item => {
                            if (typeof item === 'string') {
                                paths.push(`${prefix}${key}/${item}`);
                            } else if (typeof item === 'object') {
                                paths = paths.concat(this.generateDirectoryPaths(item, `${prefix}${key}/`));
                            }
                        });
                    } else if (typeof obj[key] === 'object') {
                        paths = paths.concat(this.generateDirectoryPaths(obj[key], `${prefix}${key}/`));
                    } else {
                        paths.push(`${prefix}${key}/${obj[key]}`);
                    }
                }
                return paths;
            },
            clearYaml() {
                this.yamlText = '';
                this.jsonText = '';
                this.directoryText = '';
            },
            copyJson() {
                if (!this.jsonText) {
                    this.$message.warning('没有可复制的内容');
                    return;
                }
                navigator.clipboard.writeText(this.jsonText).then(() => {
                    this.$message.success('JSON内容已复制到剪贴板');
                }).catch(() => {
                    this.$message.error('复制失败');
                });
            },
            copyDirectory() {
                if (!this.directoryText) {
                    this.$message.warning('没有可复制的内容');
                    return;
                }
                navigator.clipboard.writeText(this.directoryText).then(() => {
                    this.$message.success('目录路径已复制到剪贴板');
                }).catch(() => {
                    this.$message.error('复制失败');
                });
            },
            formatJson() {
                if (!this.jsonText) {
                    this.$message.warning('没有可格式化的内容');
                    return;
                }
                try {
                    const jsonObj = JSON.parse(this.jsonText);
                    this.jsonText = JSON.stringify(jsonObj, null, 2);
                    this.$message.success('JSON格式化成功');
                } catch (e) {
                    this.$message.error('JSON格式化失败：内容不是有效的JSON');
                }
            },
            compressJson() {
                if (!this.jsonText) {
                    this.$message.warning('没有可压缩的内容');
                    return;
                }
                try {
                    const jsonObj = JSON.parse(this.jsonText);
                    this.jsonText = JSON.stringify(jsonObj);
                    this.$message.success('JSON压缩成功');
                } catch (e) {
                    this.$message.error('JSON压缩失败：内容不是有效的JSON');
                }
            },
            formatYaml() {
                if (!this.yamlText) {
                    this.$message.warning('没有可格式化的内容');
                    return;
                }
                try {
                    const parsedYaml = jsyaml.load(this.yamlText);
                    this.yamlText = jsyaml.dump(parsedYaml, { lineWidth: -1 });
                    this.$message.success('YAML格式化成功');
                } catch (e) {
                    this.$message.error(`YAML格式化失败：${e.message}`);
                }
            },
            clearResult(value) {
                switch (value) {
                    case 'json':
                        this.jsonText = '';
                        break;
                    case 'dir':
                        this.directoryText = '';
                        break;
                    default:
                        break;
                }
            }
        }
    });
</script>

</body>
</html>
